<template>
  <!--图标区域-->
  <div class="icons">
    <div class="icons-item" @click="goto(1)">
      <img src="../../assets/img/kuaican.png" class="icons-item-img" />
      <p class="icons-item-desc">快餐</p>
    </div>
    <div class="icons-item" @click="goto(2)">
      <img src="../../assets/img/chaocai.png" class="icons-item-img" />
      <p class="icons-item-desc">小炒</p>
    </div>
    <div class="icons-item" @click="goto(3)">
      <img src="../../assets/img/zhoumian.png" class="icons-item-img" />
      <p class="icons-item-desc">粥面包饼</p>
    </div>
    <div class="icons-item" @click="goto(4)">
      <img src="../../assets/img/jiaozi.png" class="icons-item-img" />
      <p class="icons-item-desc">饺子鸭脖</p>
    </div>
    <div class="icons-item" @click="goto(5)">
      <img src="../../assets/img/rihan.png" class="icons-item-img" />
      <p class="icons-item-desc">异国料理</p>
    </div>
    <div class="icons-item" @click="goto(6)">
      <img src="../../assets/img/hanbao.png" class="icons-item-img" />
      <p class="icons-item-desc">汉堡</p>
    </div>
    <div class="icons-item" @click="goto(7)">
      <img src="../../assets/img/pisa.png" class="icons-item-img" />
      <p class="icons-item-desc">披萨</p>
    </div>
    <div class="icons-item" @click="goto(8)">
      <img src="../../assets/img/zhaji.png" class="icons-item-img" />
      <p class="icons-item-desc">炸鸡</p>
    </div>
    <div class="icons-item" @click="goto(9)">
      <img src="../../assets/img/naicha.png" class="icons-item-img" />
      <p class="icons-item-desc">奶茶咖啡</p>
    </div>
    <div class="icons-item" @click="goto(10)">
      <img src="../../assets/img/mianbao.png" class="icons-item-img" />
      <p class="icons-item-desc">面包甜点</p>
    </div>
  </div>
</template>

<script setup>
import router from "../../router";
import CategoryShop from "../CategoryShop.vue";

const goto = function (n) {
  router.push({ name: "categoryshop", params: { categoryId: n } });
};
</script>


<style scoped lang="scss">
@import "../../style/mixins.scss";
@import "../../style/viriables.scss";

/**图标区域*/
.icons {
  display: flex;
  flex-wrap: wrap;
  margin-top: 120px;
  &-item {
    width: 20%;
    &-img {
      display: block;
      width: 40px;
      height: 40px;
      margin: 0 auto;
    }
    &-desc {
      margin: 6px 0 16px 0;
      text-align: center;
      color: #333;
    }
  }
}
</style>
